<template>
    <div class="floatwin">
        <ul>
            <li v-for='(item,index) in options' :key='index'>
                <div v-if='item.checked'>
                    <img class="pa_img" :src="iconList[index].icon" alt="">
                </div>
            </li>
           
        </ul>
    </div>
</template>
<script>
export default {
    data(){
        return{
            options:[],
            iconList:[
                {icon:require('@/assets/img/editContent/floating-icon-gift.png')},
                {icon:require('@/assets/img/editContent/floating-icon-service.png')},
                {icon:require('@/assets/img/editContent/floating-icon-reserve.png')},
                // {icon:require('@/assets/img/editContent/floating-icon-top.png')}
            ],
        }
    },
    props:{
        option:{
            type:Object
        }
    },
    watch:{
        option:function(val){
            this.options =JSON.parse(JSON.stringify(val)).list||[{}];
        }
    },
    mounted(){
       this.options =JSON.parse(JSON.stringify(this.option)).list||[{}];
    }
}
</script>
<style lang="less" scoped>
    .floatwin{
        width:60px;
        height:auto;
        float:right;
        // border:1px solid blue;
        z-index: 200;
        font-size: 14px;
        // box-sizing: border-box;
        ul{
            width:100%;
            height: auto;
            min-height: 60px;
            // padding:3px;
            box-sizing: border-box;
            text-align:center;
            line-height: 18px;
            li{
                div{
                    width:100%;
                    height:60px;
                    // margin:16px 0 0 0 ;
                    display:flex;
                    justify-content: center;
                    align-items: center;
                    position: relative;
                    img{
                        width:100%;
                        height:100%;
                        position:absolute;
                        top:0;
                        left:0;
                        z-index: -1;
                    }
                }
            }
            li:nth-child(1) div{
                 margin: 0 ;
            }
        }
    }
</style>